<template>
  <div>
    <el-button
      v-if="updateAvailable"
      @click="handleShowMsgBox"
      type="danger"
      size="small"
      plain
      link
      >待更新</el-button
    >
    <el-button v-else type="info" size="small" plain link
      >V{{ appVersion }}</el-button
    >
    <el-dialog
      v-model="inShowing"
      title="检测到新版本"
      append-to-body
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      width="360px"
      center
    >
      <div style="text-align: center">
        <p>需刷新页面以加载新版程序</p>
        <p>将在{{ refreshSeconds }}秒后自动刷新</p>
        <div style="padding-top: 12px">
          <el-button type="primary" @click="handleReload">立即刷新</el-button>
          <el-button text @click="handleDelay">稍后</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonStore from "@/store/common";
// import dayjs from "dayjs";
import { mapWritableState } from "pinia";
import { h } from "vue";
export default {
  data() {
    return {
      loadingTimer: null,
      nextVersion: "",
      nextNotifyTime: 0,
      autoRefreshTime: 0,
      refreshTimer: null,
      inShowing: false,
      refreshSeconds: 0,
      refreshWaitTime: 10000,
    };
  },
  computed: {
    ...mapWritableState(commonStore, {
      appVersion: "appVersion",
    }),
    updateAvailable() {
      return this.nextVersion > this.appVersion;
    },
  },
  methods: {
    handleShowMsgBox() {
      this.inShowing = true;
      this.autoRefreshTime = new Date().getTime() + this.refreshWaitTime;
    },
    handleDelay() {
      this.$message({ type: "info", message: "10分钟内将不再提醒" });
      this.inShowing = false;
      this.nextNotifyTime = new Date().getTime() + 1000 * 60 * 10;
      this.autoRefreshTime =
        new Date().getTime() + 1000 * 60 * 10 + this.refreshWaitTime;
    },
    handleReload() {
      location.reload(true);
    },
    loadVersion() {
      this.axios.get("api/_version.php").then((res) => {
        this.nextVersion = res.data.version;
        if (res.data.version > this.appVersion) {
          if (new Date().getTime() > this.nextNotifyTime && !this.inShowing) {
            this.autoRefreshTime = new Date().getTime() + this.refreshWaitTime;
            this.nextNotifyTime = 0;
            this.inShowing = true;
          }
        } else if (res.data.version < this.appVersion) {
          this.appVersion = res.data.version;
          this.autoRefreshTime = 0;
        }
      });
    },
    autoRefresh() {
      if (this.autoRefreshTime != 0) {
        this.refreshSeconds = Math.round(
          (this.autoRefreshTime - new Date().getTime()) / 1000
        );
        if (new Date().getTime() >= this.autoRefreshTime) {
          this.autoRefreshTime = 0;
          this.handleReload();
        }
      } else {
        this.refreshSeconds = this.refreshWaitTime / 1000;
      }
    },
  },
  mounted() {
    this.loadVersion();
    this.loadingTimer = setInterval(() => {
      this.loadVersion();
    }, 10000);
    this.refreshTimer = setInterval(() => {
      this.autoRefresh();
    }, 500);
  },
};
</script>
